<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.bdstatic.com/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <style>

        body{
            background-color: #e9e9e9;
        }
        .container{
            height:400px;
            width:600px;
            background-color:#FFF;
            box-shadow: 18px 18px 30px rgba(0,0,0,0.4),
            -18px -18px 30px rgba(255,255,255,0.5);
            margin:80px auto;
            border-radius:10px;
            border:1px solid #FFF;
        }


        .usrform{
            width:500px;
            margin:60px auto;
        }
        input{
            /*text-indent:10px;*/
            display:block;
            width:320px;
            height:35px;
            border-radius:10px;

            margin:20px auto;
            outline:none;
            text-align:center;
            border:0.5px solid gray;
        }
        input:hover{
            border:0.5px solid gray;
        }
        .btn{
            width: 100px;
            cursor:pointer;
            color:#FFF;
            background-image:linear-gradient(135deg,#ABCDFF 10%,gray 100%);
        }
        .btn:hover{
            background-image:linear-gradient(135deg,lightgray 10%,gray 100%);
            border-style:none;
        }

        .loginbtn{
            margin: 20px 40%;
            border: 1px solid black;
        }
        a{
            text-decoration: none;
        }
        .fontCont{
            height: 25px;
            width: 325px;
            padding: 0;
            margin-top: -20px;
            margin-left: 85px;
            text-align: center;
             /*border: 1px solid black;*/
            color: red;
        }
    </style>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/book/login",
                data:{'username':$("#name").val()},
                success:function (data) {
                    if(data.toString()=='OK'){
                        $("#userInfo").css("color","green");
                    }else{
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }

        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/book/login",
                data:{'password':$("#pwd").val()},
                success:function (data) {
                    if(data.toString()=='OK'){
                        $("#pwdInfo").css("color","green");
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>
</head>
<body>
<h3 align="center" style="height: 60px">${msg}</h3>
<div class="container">
    <div class="usrform">
        <form action="${pageContext.request.contextPath}/book/logininfo" method="post" >
            <div style="width: 100%;height: 100px;border: 1px solid aliceblue">
                <label  style="margin: 30px;position: absolute" >账号</label>
                <input id="name" type="text" class="usr" name="username" required onblur="a1()"/>
                <div class="fontCont"><p id="userInfo" class="fon"></p></div>
            </div>
            <div style="width: 100%;height: 100px;border: 1px solid aliceblue">
                <label  style="margin: 30px;position: absolute">密码</label>
                <input id="pwd" type="password"  class="pwd" name="password" required onblur="a2()"/>
                <div class="fontCont"><p id="pwdInfo" class="fon"></p></div>
            </div>
            <div style="width: 100%;height: 50px;"><input type="submit" class="btn loginbtn" value="登陆"></div>
        </form>
    </div>
</div>

</body>
</html>
